<template>
  <div class="payment-container">
    <div class="payment-header">
      <h2>订单支付</h2>
    </div>

    <div class="payment-content">
      <div class="order-info">
        <h3>订单信息</h3>
        <div class="info-item">
          <span class="label">订单编号：</span>
          <span>{{ orderInfo.orderNo }}</span>
        </div>
        <div class="info-item">
          <span class="label">支付金额：</span>
          <span class="price">¥{{ orderInfo.amount }}</span>
        </div>
        <div class="info-item">
          <span class="label">支付方式：</span>
          <span>{{ paymentMethodText }}</span>
        </div>
        <div class="info-item" v-if="orderInfo.isInstallment">
          <span class="label">分期期数：</span>
          <span>{{ orderInfo.installmentMonths }}期</span>
        </div>
        <div class="info-item" v-if="orderInfo.isInstallment">
          <span class="label">每月还款：</span>
          <span class="price">¥{{ orderInfo.monthlyPayment }}</span>
        </div>
      </div>

      <div class="payment-methods">
        <h3>选择支付方式</h3>
        <el-radio-group v-model="selectedPaymentMethod">
          <el-radio label="CREDIT">信用支付</el-radio>
          <el-radio label="INSTALLMENT" :disabled="!canInstallment">
            分期付款
          </el-radio>
        </el-radio-group>

        <div class="payment-tips" v-if="selectedPaymentMethod === 'INSTALLMENT'">
          <el-alert
            title="分期付款说明"
            type="info"
            :closable="false"
            show-icon
          >
            <p>1. 分期付款需要信用分600分以上</p>
            <p>2. 订单金额需大于1000元</p>
            <p>3. 分期手续费为0.5%/月</p>
          </el-alert>
        </div>
      </div>

      <div class="payment-actions">
        <el-button @click="handleCancel">取消支付</el-button>
        <el-button type="primary" @click="handlePay">立即支付</el-button>
      </div>
    </div>

    <!-- 支付结果对话框 -->
    <el-dialog
      v-model="resultDialogVisible"
      :title="paymentResult.success ? '支付成功' : '支付失败'"
      width="400px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="payment-result">
        <el-icon
          :size="48"
          :color="paymentResult.success ? '#67c23a' : '#f56c6c'"
        >
          <component :is="paymentResult.success ? 'CircleCheck' : 'CircleClose'" />
        </el-icon>
        <p>{{ paymentResult.message }}</p>
      </div>
      <template #footer>
        <el-button @click="handleResultConfirm">
          {{ paymentResult.success ? '查看订单' : '重新支付' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { CircleCheck, CircleClose } from '@element-plus/icons-vue'
import { createPayment, queryPaymentStatus } from '@/api/payment'

const route = useRoute()
const router = useRouter()

const orderInfo = ref({
  orderNo: '',
  amount: 0,
  paymentMethod: '',
  isInstallment: false,
  installmentMonths: 0,
  monthlyPayment: 0
})

const selectedPaymentMethod = ref('CREDIT')
const canInstallment = ref(false)
const resultDialogVisible = ref(false)
const paymentResult = ref({
  success: false,
  message: ''
})

// 计算属性
const paymentMethodText = computed(() => {
  return orderInfo.value.isInstallment ? '分期付款' : '信用支付'
})

// 方法
const loadOrderInfo = async () => {
  try {
    // 从路由参数获取订单信息
    const { orderNo, amount, paymentMethod, isInstallment, installmentMonths, monthlyPayment } = route.query
    orderInfo.value = {
      orderNo,
      amount: Number(amount),
      paymentMethod,
      isInstallment: isInstallment === 'true',
      installmentMonths: Number(installmentMonths),
      monthlyPayment: Number(monthlyPayment)
    }
    selectedPaymentMethod.value = paymentMethod
  } catch (error) {
    ElMessage.error('获取订单信息失败')
    router.push('/credit/orders')
  }
}

const handlePay = async () => {
  try {
    // 创建支付订单
    const response = await createPayment(orderInfo.value.orderNo)
    const paymentId = response.data.paymentNo

    // 模拟支付过程
    await new Promise(resolve => setTimeout(resolve, 2000))

    // 查询支付状态
    const status = await queryPaymentStatus(paymentId)
    
    // 显示支付结果
    paymentResult.value = {
      success: status === 'SUCCESS',
      message: status === 'SUCCESS' ? '支付成功，即将跳转到订单页面' : '支付失败，请重试'
    }
    resultDialogVisible.value = true
  } catch (error) {
    ElMessage.error('支付失败')
  }
}

const handleCancel = () => {
  router.push('/credit/orders')
}

const handleResultConfirm = () => {
  if (paymentResult.value.success) {
    router.push('/credit/orders')
  } else {
    resultDialogVisible.value = false
  }
}

onMounted(() => {
  loadOrderInfo()
})
</script>

<style lang="scss" scoped>
.payment-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);

  .payment-header {
    margin-bottom: 20px;

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .payment-content {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 4px;
    padding: 30px;

    .order-info {
      margin-bottom: 30px;

      h3 {
        margin: 0 0 20px;
        font-size: 18px;
        color: #303133;
      }

      .info-item {
        display: flex;
        margin-bottom: 15px;
        color: #606266;

        .label {
          width: 100px;
          color: #909399;
        }

        .price {
          color: #f56c6c;
          font-weight: bold;
        }
      }
    }

    .payment-methods {
      margin-bottom: 30px;

      h3 {
        margin: 0 0 20px;
        font-size: 18px;
        color: #303133;
      }

      .payment-tips {
        margin-top: 20px;

        p {
          margin: 5px 0;
          color: #606266;
        }
      }
    }

    .payment-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
  }

  .payment-result {
    text-align: center;
    padding: 20px 0;

    p {
      margin: 20px 0 0;
      color: #606266;
    }
  }
}
</style> 